<template>
	<div class="base_info_container">
		<el-tabs type="border-card" v-model="activeName">
			<el-tab-pane label="网站基本信息" name="1"></el-tab-pane>
			<el-tab-pane label="网站栏目配置" name="2"></el-tab-pane>
			<el-tab-pane label="网站数据配置" name="3"></el-tab-pane>
		</el-tabs>
		<component :is="componentName"></component>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import siteBaseInfo from './site/index';
import siteBaseTable from './site/table';
import siteDataConfig from './data/index';
import siteColumnConfig from './column/index';
export default {
	components: { siteBaseInfo, siteBaseTable, siteColumnConfig, siteDataConfig },
	data() {
		return {
			activeName: '2',
			componentName: ''
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	watch: {
		activeName: {
			handler(val) {
				if (val === '1') {
					if (this.userInfo.account === 'dever') {
						this.componentName = 'siteBaseTable';
					} else {
						this.componentName = 'siteBaseInfo';
					}
				} else if (val === '2') {
					this.componentName = 'siteColumnConfig';
				} else if (val === '3') {
					this.componentName = 'siteDataConfig';
				}
			},
			immediate: true
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.base_info_container::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-tabs {
		border: none;
		flex-shrink: 0;
		box-shadow: none;
	}
	.el-tabs__content {
		display: none;
	}
}
</style>
